<script setup>
import { ref, onMounted, defineProps } from 'vue'
// width: 300px;
// height: 320px;
const image = ref(null)
const props = defineProps({
    width: {
        type: String,
        default: '300'
    },
    height: {
        type: String,
        default: '320'
    },
    img: {
        type: String,
        default: '/default.jpg'
    },
    isAnimation: {
        type: Boolean,
        default: true
    }
})

onMounted(() => {
    if (!props.isAnimation) {
        image.value.classList.remove('imgAnimation')
        image.value.classList.add('noAnimation')
    }
})


</script>

<template>
    <div class="card-box" :style="{ width: props.width + 'px', height: props.height + 'px' }">
        <div class="card-image">
            <img class="imgAnimation" ref="image" :src="img" alt="详细图片">
        </div>
    </div>
</template>

<style lang="scss" scoped>
@keyframes translateImg {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(0, -50%);

    }

    50% {
        transform: translate(-50%, -50%);
    }

    75% {
        transform: translate(-50%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

// 卡片载入动画
@keyframes cardIn {
    0% {
        transform: translate(0, -100%);
    }

    50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(0, -10%);
    }

    100% {
        transform: translate(0, 0);
    }
}

.card-box {
    width: 300px;
    height: 320px;
    margin: 10px;
    padding: 2px;
    border-radius: 10px;
    background-color: #fff;
    animation: cardIn 0.5s ease-in-out;
}

.card-box {
    width: 300px;
    height: 320px;
    margin: 10px;
    padding: 2px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .card-image {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        border: 1px solid #ccc;
        overflow: hidden;

        // img {


        // }
    }
}

.imgAnimation {
    width: 200%;
    height: 200%;
    object-fit: cover;
    position: absolute;
    animation: translateImg 20s linear infinite;
}

.noAnimation {
    width: 100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    &:hover{
        transform: scale(1.1);
    }
}
</style>